 <style>
 
 
 
  .weather_form_h{
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 3px;
	width: auto;
	width: 250px;
	background-color: rgba(2, 82, 84, 0.8);
	box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.42),-2px -2px 4px rgba(255, 255, 255, 0.42);
	cursor:pointer;
 
	top: 4px;

    float:left;
 }
  .line_h{
  
	width: 20px;
	height: 1px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.9);
	background-color: rgba(2, 82, 84, 0.8);
	margin: 15px 0px;
	box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 1);
	float: left;
  
  }
   .weather_form_h span{
 	  text-align:center;
 }
    .weather_form_h .info_item{
      display: flex;
  }
    .weather_form_h  .info_item.now{
  
   font-size: 16px;
    
    border-radius: 4px;
	color:navajowhite
  }
    .weather_form_h .info_item.now .info_img  {
     width: 76px;
	 height: 80px;
 
 }
    .weather_form_h .info_item.now  .info_time{
	 padding:28px 2px;
	 
	
 } 
	.weather_form_h .info_item.now  .info_content{
	
	 padding:18px 2px;
 }
	
   .weather_form_h  .info_item:hover{
     background-color: rgba(255,255,255,0.1);
  }
  .weather_form_h .info_time{
         width:50px;
       }
  .weather_form_h .info_content{
         width:120px;
       }
     .weather_form_h .info_item div{
       padding:2px ;
  }
     .weather_form_h  .info_item .info_img{
	    width: 30px;
		height: 30px;
		background-color: rgba(2, 82, 84, 0);
		border-radius: 2px;
		margin:10px auto;
 
  }
 .weather_form_h .info_item .info_1{
    width:36px;

  }
     .weather_form_h .info_item .info_2{
      width:68px;

  }
    
   .weather_form_h *{
      text-align:center;
   }
 
    .weather_form_h  .spline {
        width: 96%;
		margin: 0 auto;
		height: 1px;
		background: rgba(0,0,0,0.2);
		border-top: 1px solid rgba(255,255,255,0.7);
  }
 
  .weather_form{
  
    position:absolute;
    top:0;
    padding: 3px;
    z-index:2;

  }
  #wform_h{
	top: 80px;
	left: 60px;
 }
    .weather_form_h .city_name{
     position: absolute; top: 5px; left: 36px; 
  }
  
   #weather_tool{
	 background-color:rgba(2, 82, 84, 0.8);
	 box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.42),-2px -2px 4px rgba(255, 255, 255, 0.42);
	 height: 40px;
	 left: 20px;
	 position: absolute;
	 top: 70px;
	 width: 40px;
	 z-index: 3;
	 border-radius:3px;
     border:1px solid rgba(255, 255, 255,0.7);
     display:none;
 }
</style>
<script>
$(function(){ 
  
	$("body") .on("tap","#weather_tool",function(){
		var _this= $(this);
		if($(".weather_form").css("display")=='block'){
		 
			$(".weather_form").slideUp("fast");
		}else{
		 
		     $(".weather_form").slideDown("fast");
		}
		
	});
 
 
 
})
 function updateWeatherForm( wdata){
	if(wdata==null )return;
    if(wdata.result==null)  return;
    var data=  wdata.result.data;

   // $("#d_curr .info_img").css("background-image",real.img); 

    var weathers=data.weather;


	for(var i=0;i<4;i++){
		
           
		
         $("#d_to"+i+" .w_date").html(weathers[i].date.slice(5)); 

		 $("#d_to"+i+" .w_week").html("周"+weathers[i].week); 
		
		 $("#d_to"+i+" .w_stat").html(weathers[i].info.day[1]); 

		 $("#d_to"+i+" .w_temp").html(weathers[i].info.night[2]+"℃~"+weathers[1].info.day[2]+"℃"); 
  
		 $("#d_to"+i+" .w_wind").html(weathers[i].info.day[4]); 
		 
		 $("#d_to"+i+" .info_img").attr("class","info_img weath_icon png30 d"+weathers[i].info.day[0])
	}


        var real=data.realtime ;


		$("#d_to0 .w_stat").html(real.weather.info); 

	    //$("#d_to0 .w_temp").html(real.weather.temperature); 
	    
	    //alert(real.weather.humidity)

		$("#d_to0 .w_humidity").html(real.weather.humidity); 


		$("#d_to0 .w_wind").html(real.wind.direct+"("+real.wind.power+")"); 
		
	//	alert(real.weather.img)
		
		
	    $("#d_to0 .info_img").attr("class","info_img weath_icon png80 d"+real.weather.img)
	    
	    $("#d_to0 .city_name").html(real.city_name);

		// 天亮时间----天黑时间
	  }


</script>



 <div class="weather_form"  id="wform_h"  style="display:none">
 <div class="line_h"></div>

 <div class="weather_form_h"    >
				   <div class="info_item now " id="d_to0"> 
				   <div class="city_name">重庆</div>

					<div class="info_time">
					   
						<div class="info_text  w_date">  11-12 </div> 
						<div class="info_text w_week">  周四 </div> 
					</div>
	                  <div class="info_img " ></div> 
				   <div class="info_content"> 
						<div class="info_text">  <span class="info_1  w_stat" >晴 </span> <span class="info_2 w_temp">-32℃~34℃</span> </div> 
				        <div class="info_text">  <span class="info_1 w_wind" >微风 </span>   </div> 
						<div class="info_text">  <span class="info_1" >湿度</span> <span class="info_2 w_humidity">64</span> </div> 
					</div>
				  </div>
                      <div class="spline"></div>
					  <div class="info_item"  id="d_to1"> 
				

					<div class="info_time">
						<div class="info_text  w_date">  11-12 </div> 
						<div class="info_text  w_week">  周四 </div> 
					</div>
	                  <div class="info_img " ></div> 
				   <div class="info_content"> 
						<div class="info_text">  <span class="info_1 w_stat" >晴 </span> <span class="info_2 w_temp">-32℃~34℃</span> </div> 
			 
						<div class="info_text">  <span class="info_1 w_wind" >风速</span>  </div> 
					</div>
				  </div>
				   <div class="spline"></div>
					  <div class="info_item"  id="d_to2"> 
				

					<div class="info_time">
						<div class="info_text  w_date"> 11-12 </div> 
						<div class="info_text  w_week"> 周四 </div> 
					</div>
	                  <div class="info_img " ></div> 
				   <div class="info_content"> 
						<div class="info_text">  <span class="info_1 w_stat" >晴 </span> <span class="info_2 w_temp">-3C~34C</span> </div> 
					 
						<div class="info_text">  <span class="info_1 w_wind" >风速</span>  </div> 
					</div>
				  </div>
				   
					
					 <div class="spline"></div>
					  <div class="info_item"  id="d_to3"> 
				

					<div class="info_time">
						<div class="info_text  w_date"> 11-12 </div> 
						<div class="info_text  w_week"> 周四 </div> 
					</div>

	                  <div class="info_img " ></div> 
				   <div class="info_content"> 
						<div class="info_text">  <span class="info_1 w_stat" >晴 </span> <span class="info_2 w_temp">-3C~34C</span> </div> 	
						<div class="info_text">  <span class="info_1 w_wind" >风速</span>   </div> 
					</div>
				  </div>



	  </div>

	  </div>